<template>
  <div class="custom-body" :style="borderStyle">
    <el-button v-if="column && column.type === 1" type="primary" class="button-logout" @click="openBarScan">
      <i class="custom-icon iconfont icon-iconfont icon-iconfont icon-a-scan1-line" />
      &nbsp;&nbsp;&nbsp;&nbsp;扫一扫
    </el-button>
    <el-button v-if="column && column.type === 2" type="primary" class="button-logout" @click="open">
      <i class="custom-icon el-icon-switch-button" />
      &nbsp;&nbsp;&nbsp;&nbsp;注销
    </el-button>
    <div v-if="systemList" class="custom-iframe">
      <iframe v-for="(item,index) in systemList" :key="'iframe-'+index" :src="item.url+item.logoutUrl" />
    </div>
    <bar-scan ref="barScan" @ok="getResult" @err="geterror" />
  </div>
</template>

<script>
import Config from '@/settings'
import { clearAllCookie } from '@/utils/auth'
import BarScan from '@/components/BarScan/index.vue'
export default {
  name: 'AppDividerV1',
  components: { BarScan },
  props: {
    temp: {
      type: Object,
      default() {
        return {}
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    layout: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      column: null,
      titleFontSize: { fontSize: '16px' },
      contentFontSize: { fontSize: '13px' },
      systemList: [],
      columnStyle: {}
    }
  },
  computed: {
    borderStyle() {
      if (this.temp.sfdzqp === true) {
        return { position: 'absolute', left: '0px', right: '0px', top: '0px', bottom: '0px' }
      }
      return { height: this.temp.defaultHeight }
    },
    liStyle() {
      const width = (100 / this.column.row).toFixed(2)
      const height = (100 / Math.ceil(this.column.size / this.column.row)).toFixed(2)
      return { width: width + '%', height: height + '%' }
    }
  },
  watch: {
    layout: {
      handler(newName, old) {
        this.columnStyle = newName
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newData, oldData) {
        if (this.showHeader) {
          const pzx = JSON.parse(newData.data.pzx)
          this.column = pzx
          this.titleFontSize = { fontSize: this.column.titleFontSize + 'px', backgroundColor: this.columnStyle.mrzt }
          this.contentFontSize = { fontSize: this.column.contentFontSize + 'px' }
        } else {
          const pzx = JSON.parse(newData.pzx)
          this.column = pzx
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    open() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
      })
    },
    logout() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading'
      })
      this.$store.dispatch('MobileLogOut').then((res) => {
        const { data } = res
        this.systemList = data.data
        clearAllCookie()
        if (Config.isCas) {
          setTimeout(() => {
            loading.close()
            window.location.href = '/'
          }, 600)
        } else {
          setTimeout(() => {
            loading.close()
            window.location.href = '/'
          }, 600)
        }
      }).catch(() => {
        clearAllCookie()
        if (Config.isCas) {
          setTimeout(() => {
            loading.close()
            window.location.href = '/'
          }, 600)
        } else {
          setTimeout(() => {
            loading.close()
            window.location.href = '/'
          }, 600)
        }
      })
      /* requestGet('').then(res => {
        const { content } = res
        this.systemList = content

      }).catch(() => {
        this.$store.dispatch('LogOut').then(() => {
          clearAllCookie()
          if (Config.isCas) {
            loading.close()
            window.location.href = '/'
          } else {
            loading.close()
            location.reload()
          }
        }).catch(() => {
          clearAllCookie()
          if (Config.isCas) {
            loading.close()
            location.reload()
          } else {
            loading.close()
            location.reload()
          }
        })
      })*/
    },
    openBarScan() {
      this.$refs.barScan.getCameras()
    },
    geterror() {
      this.$message.info('扫码失败！')
      this.$refs.barScan.stop()
    },
    getResult() {
      this.$message.success('扫码成功！')
      this.$refs.barScan.stop()
    }
  }
}
</script>

<style scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 15px;
  box-sizing: border-box;
}
.button-logout {
  width: 100%;
}
</style>
